<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onMounted } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
const { proxy } = getCurrentInstance()

/* ---- */
const WXConfig = proxy.$Store.get('WXConfig') || {}

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const user = reactive({
  showFot: false,
  // ----
  padStyle: {}
})
// ----
const menu_one = [{
  show: true,
  name: '推广销售',
  icon: 'fa fa-star xw-color-1',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForPromote') }
}, {
  show: true,
  name: '招商招聘',
  icon: 'fa fa-sack-dollar xw-color-3',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForCapital') }
}, {
  show: true,
  name: '发现商机',
  icon: 'fa fa-briefcase-clock xw-color-5',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForOpport') }
}, {
  show: true,
  name: '发放佣金',
  icon: 'fa fa-hands-usd xw-color-4',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForWageSent') }
}]
// ----
const menu_two = [{
  show: true,
  name: '系统默认',
  icon: 'fa fa-star-shooting xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ClubService') }
}, {
  show: true,
  name: '行业标签',
  icon: 'fa fa-tags xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ClassTag') }
}, {
  show: true,
  name: '通用密码',
  icon: 'fa fa-key xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'GlobalPass') }
}, {
  show: true,
  name: '系统广告',
  icon: 'fab fa-buysellads xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'SysAdvList') }
}, {
  show: true,
  name: '商友属性',
  icon: 'fa fa-briefcase xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'BusiAttrib') }
}, {
  show: true,
  name: '佣金比例',
  icon: 'fa fa-box-usd xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'WageRatioResult') }
}, {
  show: true,
  name: '提现设置',
  icon: 'fa fa-money-check-alt xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'WageWithDrawal') }
}, {
  show: true,
  name: '服务团队',
  icon: 'fa fa-hands-heart xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForTermAdm') }
}, {
  show: true,
  name: '无数据提示',
  icon: 'fa fa-database xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'DataList') }
}, {
  show: true,
  name: '合作意向',
  icon: 'fa fa-handshake xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'IntendList') }
}, {
  show: true,
  name: '充值金额',
  icon: 'fa fa-wand-magic-sparkles xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'WagePay') }
}, {
  show: true,
  name: '关注链接',
  icon: 'fa fa-link xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'FocusLink') }
}, {
  show: true,
  name: '赞助推广',
  icon: 'fa fa-trophy-star xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForSponsor') }
}, {
  show: true,
  name: '背景音乐',
  icon: 'fa fa-music xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'MusicList') }
}, {
  show: true,
  name: '定制系统',
  icon: 'fa fa-light-ceiling xw-color-20',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForCustomFunc') }
}]
// ----
const menu_three = [{
  show: true,
  name: '会员管理',
  icon: 'fa fa-users-cog xw-color-5',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForSystemUser') }
}, {
  show: true,
  name: '万域商友',
  icon: 'fa fa-people-roof xw-color-7',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForFriend') }
}, {
  show: true,
  name: '婚介交友',
  icon: 'fa fa-heart-pulse xw-color-8',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForMarry') }
}, {
  show: true,
  name: '我们在哪',
  icon: 'fa fa-map-marked-alt xw-color-9',
  callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'ForOfficeAdm') }
}]

/* ---- */
const getCurrencyInfo = (callback) => {
  setTimeout(() => { user.showFot = true }, 300)
  // ----
  proxy.$Myfun.getFotH().then((res) => {
    user.padStyle = { paddingBottom: res + 'px' }
  })
}
// ----
const getAuditFun = (type, item) => {
  switch (Number(type)) {
    case 1: {
      item.callback && item.callback(item)
      break
    }
  }
}

/* ---- */
onMounted(() => {
  getCurrencyInfo()
})
onBeforeRouteLeave(() => {
  setTimeout(() => { user.showFot = false }, 300)
  // ----
  proxy.$Myfun.setScrollTop(proxy.$refs.formSection)
})
</script>

<template>
  <div class="mescroll-touch" :style="user.padStyle" ref="formSection">
    <div class="menuOne xw-bg-white xw-Bfg xw-flex xw-flex-align">
      <template v-for="(item, index) in menu_one">
      <a class="xw-flex-W1 xw-flex xw-flex-center xw-flex-column" @click="getAuditFun(1, item)" v-if="item.show"><em :class="item.icon"></em>{{item.name}}</a>
      </template>
    </div>
    <div class="menuTwo">
      <div class="MTO-box xw-flex xw-flex-align xw-flex-wrap">
        <template v-for="(item, index) in menu_two">
        <a class="xw-flex-BW3 xw-flex xw-flex-center xw-flex-column" @click="getAuditFun(1, item)" v-if="item.show"><em :class="item.icon"></em>{{item.name}}</a>
        </template>
      </div>
    </div>
    <transition name="slideUpFade">
      <footer class="xw-bg-gray" v-if="user.showFot">
        <div class="menuThree xw-bg-white xw-radius-3 xw-flex xw-flex-align">
          <template v-for="(item, index) in menu_three">
          <a class="xw-flex-W1 xw-flex xw-flex-center xw-flex-column" @click="getAuditFun(1, item)" v-if="item.show"><em :class="item.icon"></em>{{item.name}}</a>
          </template>
        </div>
      </footer>
    </transition>
  </div>
</template>

<style scoped>
/* ---- */
.menuOne { position: sticky; top: 0; right: 0; left: 0; z-index: 99; }
.menuOne a { padding: 1rem 0; }
.menuOne em { height: 3.4rem; line-height: 3.4rem; font-size: 2.4rem; }

/* ---- */
.MTO-box a { padding: 1.4rem 0; border-style: solid; border-color: #d1d1d1; border-width: 1px 1px 0 0; }
.MTO-box a:nth-of-type(1), .MTO-box a:nth-of-type(2), .MTO-box a:nth-of-type(3) { border-top-width: 0; }
.MTO-box a:nth-of-type(3n) { border-right-width: 0; }
.MTO-box em { height: 3.4rem; line-height: 3.4rem; font-size: 2.4rem; }

/* ---- */
.menuThree { position: relative; margin: 1rem; }
.menuThree a { padding: 1rem 0; }
.menuThree em { height: 3.4rem; line-height: 3.4rem; font-size: 2.4rem; }
</style>
